<template>
  <div class="view-wrapper">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
          <el-form-item label="" prop="query">
            <el-input v-model="queryParams.query" placeholder="NFR名称/发行平台/发行方" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="前端显示："  prop="status">
            <el-select v-model="queryParams.status" placeholder="全部" size="small">
              <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态："  prop="type">
            <el-select v-model="queryParams.type" placeholder="全部" size="small">
              <el-option v-for="item in typeList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
     
      <div class="listBox">
        <div class="topBtn" style="margin-bottom: 14px">
          <div>
            <el-button type="primary" @click="handleAdd">新增发售日历</el-button>
          </div>
          <div style="margin-left:14px">
            <export-excel-button
              title="发售日历列表"
              action="/kyy/sale/calendar/export"
              :params="ExportParams"
            />
          </div>
          <div>
            <el-upload  style="margin-left: 14px" class="upload-demo" :action="importSaleCalendar" :headers="headers" :data="fileData" :limit="1"
              :on-success="handleFileChange" :show-file-list="true" :file-list="fileList">
              <el-button type="primary" >导入产品</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </div>
          <div>
            <el-upload  style="margin-left: 14px" class="upload-demo" :action="importprice" :headers="headers" :data="fileData" :limit="1"
              :on-success="handleFileChange" :show-file-list="true" :file-list="fileList">
              <el-button type="primary" >导入价格</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </div>
        </div>
        <el-table v-loading="loading" :data="customerList" stripe border>
          <el-table-column label="序号" type="index" width="55" align="center" fixed />
          <el-table-column label="产品id" align="center" prop="id" :show-overflow-tooltip="true" />
          <el-table-column label="发行平台" align="center" prop="issuePlatform" :show-overflow-tooltip="true"/>
          <el-table-column label="发行方" align="center" prop="issuer" :show-overflow-tooltip="true" />
          <el-table-column label="发行方logo" align="center" prop="logo" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div class="imgBox">
                <img :src="scope.row.logo" alt="">
              </div>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center" prop="name" :show-overflow-tooltip="true"/>
          <el-table-column label="产品图片" align="center" prop="img" :show-overflow-tooltip="true" >
             <template slot-scope="scope">
              <div class="imgBox">
                <img :src="scope.row.img" alt="">
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发行数量" align="center" prop="issueNum" :show-overflow-tooltip="true" />
          <el-table-column label="发行时间" align="center" prop="issueTime" :show-overflow-tooltip="true" />
          <el-table-column label="结束时间" align="center" prop="endTime" :show-overflow-tooltip="true"/>
          <el-table-column label="发行价格" align="center" prop="issuePrice" :show-overflow-tooltip="true" />
          <el-table-column label="第三方链接" align="center" prop="thirdPartyLinks" :show-overflow-tooltip="true"/>
          <el-table-column label="状态" align="center" prop="type" :show-overflow-tooltip="true"/>
          <el-table-column label="历史价格" align="center" prop="historyPriceNum" :show-overflow-tooltip="true" />
          <el-table-column label="排序" align="center" prop="sort" :show-overflow-tooltip="true" />
          <el-table-column label="显示" align="center" prop="status" :show-overflow-tooltip="true" :formatter="statusatter"/>
          <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.row)">
                编辑  </el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope.row)">
                删除</el-button> 
              <el-button size="mini" type="text" @click="handleStatus(scope.row)" v-if="scope.row.status == 1">
                隐藏</el-button> 
              <el-button size="mini" type="text" @click="handleStatus(scope.row)" v-if="scope.row.status == 2">
                显示</el-button> 
              <el-button size="mini" type="text" @click="handlehistory(scope.row)">
                历史价格</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />

    </div>
    <add-dialog
      ref="childRef"
      v-if="addActivity"
      :id="id"
      :pathType="pathType"
      :visible.sync="addActivity"
      @success="_handleSuccess" 
    /> 
    <dialog-list
      ref="childRef"
      v-if="dialogListShow"
      :id="id"
      :visible.sync="dialogListShow"
      @success="_handleSuccess" 
    />
  </div>
  
</template>

<script>
  import {
    adminDict,
    calendarList,
    statusGuess,
    listChangeStatus,
    deleteCalendar,
  } from "@/api/kyyOfficialWebsite/offeringCalendar";
  import addDialog from './components/addDialog' 
  import dialogList from './components/dialogList'
  import { getToken } from "@/utils/auth";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  export default {
    name: "Customer",
    components: {
      ExportExcelButton,
      addDialog,
      dialogList,
    },
    data() {
      return {
        id: '',
        addActivity: false,
        dialogListShow: false,
        pathType: 'add',
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 会员列表表格数据
        customerList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          query: '',
          status: null,
          type: '',
        },
        statusList:[
          {id: '',value: '全部',},
          {id: '1',value: '显示',},
          {id: '2',value: '隐藏',},
        ],
        typeList:[
          {id: '',value: '全部',},
          {id: '1',value: '即将发售',},
          {id: '2',value: '已发售',},
          {id: '3',value: '已结束',},
        ],
         //导入需要的参数
        fileData: {
            
        },
        fileList: [],
        importSaleCalendar: process.env.VUE_APP_BASE_API + "/kyy/sale/calendar/importSaleCalendar",  
        importprice: process.env.VUE_APP_BASE_API + "/kyy/sale/calendar/history/price/import", 
        headers: {
          "X-Access-Token": getToken(),
        }, //设置上传文件请求头
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询竞猜活动列表 */
      getList() {
        this.loading = true;
        calendarList(this.queryParams).then(response => {
          this.total = response.result.total
         
            this.customerList = response.result.records
            this.customerList = this.customerList.map(item => {
              // console.log('item',item)
              Object.keys(item).forEach(key => {
                if (item[key] === '') {
                  item[key] = '-'
                }
              })
              return item
            })
            
            this.loading = false;
          
        }).finally(()=>{
          this.loading = false;
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        this.date = []
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },
      /** 详情按钮操作 */
      handleView(row,type) {
        // this.$refs.dialog.open(row.id, true);
        this.$router.push({
          path: "/members/Prepaid-details",
          query: {
            id: row.id,
            type: type
          },
        })
      },
      
      //新增活动
      handleAdd(){
        this.addActivity = true
        this.pathType = 'add'
      },
      //编辑活动
      handleEdit(row){
        this.addActivity = true
        this.id = row.id
        this.pathType = 'edit'
      },
      //停用/启用链接
      handleStatus(row){
        if(row.status == 1){
          var title = '是否隐藏'
        }else if(row.status == 2){
          var title = '是否显示'
        }
        this.$confirm(title, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            listChangeStatus(row.id).then(res => {
              this.$message.success('操作成功')
              this.getList()
            })
          }).catch(() => {});
      },
      //历史价格
      handlehistory(row){
        this.dialogListShow = true
        this.id = row.id
      },
       //删除
      handleDelete(row){
       
        this.$confirm('是否删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteCalendar(row.id).then(res => {
              this.$message.success('操作成功')
              this.getList()
            })
          }).catch(() => {});
      },
      //活动配置
      
      _handleSuccess(data) {
        console.log("data", data);
        this.queryParams.pageNum = 1
        this.getList();
      },
      //导入文件
      handleFileChange(res, file) {
        console.log('文件', res, file)
        if (res.code == 200) {
          this.$message.success('导入成功');
          this.getList();
        } else {
          this.$message.error(res.message);
          
        }
      },
      statusatter(row){
        if(row.status == 1){
          return '显示'
        }else if(row.status == 2){
          return '隐藏'
        }else{
          return '-'
        }
      },
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  .topBtn{
    display: flex;
    justify-content: flex-start;
  }
  .imgBox{
    display: flex;
    justify-content: center;
    img{
      width: 100px;
    }
  }
</style>
